<template>
  <div class="node_diagram">
    <ul>
      <li
        v-for="(item, index) in data"
        :key="index"
        :style="`top:${item.top}%;left:${item.left}%;`"
        :class="item.type"
      >
        <div v-if="item.content" class="gauge_txt">
          <span>{{ item.content }}</span>
        </div>
        <div v-else class="val_on_off">
          <span>阀门开关：</span>
          <i :class="item.state === 1 ? 'active':''" />
          <i :class="item.state === 0 ? 'active2':''" />
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'NodeDiagram',
  props: {
    // eslint-disable-next-line vue/require-default-prop
    data: {
      type: Array
    }
  },
  data() {
    return {
    }
  }
}
</script>

<style scoped lang="scss">
.node_diagram{
  ul{
    li{
      position: absolute;
      font-size: 12px;
      .gauge_txt{
        padding: 5px 10px;
      }
      .val_on_off{
        display: flex;
        align-items: center;
        padding: 5px;
      }
    }
  }
}
.gauge{
  color:#fff;
  background:#000;
}
.val{
  color: #333;
  background:#fff;
  i {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background:#eee;
    opacity: .3;
    margin: 0 2px;
    &:nth-child(2){
      background:red;
    }
    &:nth-child(3){
      background:green;
    }
    &.active{
      opacity: 1;
    }
    &.active2{
      opacity: 1;
    }
  }
}
</style>
